<template>
  <div class="modeldataModel">
    <div class="header">
      <div class="left">
        <div class="label">属性/标识符</div>
        <a-input class="search-ipt" v-model:value="sate.keyWord" placeholder="请输入属性或标识符" />
        <a-button type="primary" @click.stop="onSearch"> 查询 </a-button>
      </div>
      <div class="right">
        <span>实时数据</span>
        <a-switch
          v-model:checked="sate.checked"
          :loading="sate.loading"
          @change="settimer"
          style="margin-left: 10px; margin-bottom: 3px"
        />
        <a-radio-group v-model:value="sate.mode" size="small" class="redioGroup">
          <a-radio-button value="card"><AppstoreOutlined /></a-radio-button>
          <a-radio-button value="table"><MenuOutlined /></a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <a-table
      :dataSource="sate.dataSource"
      :columns="columns"
      size="small"
      v-if="sate.mode == 'table'"
      :pagination="false"
    >
      <template #attr_status="{ record }">
        <div :style="{ color: record.attr_status == '正常' ? '#52C41A' : '#FF5500' }">{{
          record.attr_status
        }}</div>
      </template>
      <template #action="{ record }">
        <a @click="clickSee(record)">查看</a>
      </template>
    </a-table>
    <a-spin :spinning="sate.loading" v-else>
      <a-row type="flex" :gutter="20">
        <a-col
          :span="6"
          v-for="(item, index) in sate.dataSource"
          :key="index"
          :xs="12"
          :sm="12"
          :md="8"
          :lg="8"
          :xl="6"
        >
          <div
            class="cardItem"
            @click="clickSee(item)"
            :class="item.attr_status === '异常' ? 'active' : ''"
          >
            <div class="row">
              <div class="left">{{ item.attribute_name }}</div>
              <!-- <div class="right"><a @click="clickSee(item)">查看数据</a></div> -->
            </div>
            <div class="count">
              <div class="count-left">{{ item.attribute_value ? item.attribute_value : 0 }}</div>
            </div>
            <div class="limit-values">
              <div class="limit-values-row">
                <span class="mr16">
                  <span class="mr8">标准值</span>
                  {{ item.standard_value ? item.standard_value : 0 }}
                </span>
              </div>
              <div class="limit-values-row">
                <span class="mr16">
                  <span class="mr8">上限值</span>
                  {{ item.ceiling_value ? item.ceiling_value : 0 }}</span
                >
              </div>
              <div class="limit-values-row">
                <span
                  ><span class="mr8">下限值</span
                  >{{ item.lower_value ? item.lower_value : 0 }}</span
                >
              </div>
            </div>
            <div class="time">{{ item.time }}</div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <viewmodeldataModel ref="viewmodeldataRef" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, onMounted, ref, Ref, onBeforeUnmount } from 'vue';
  import { AppstoreOutlined, MenuOutlined } from '@ant-design/icons-vue';
  import { deviceModedata } from '/@/api/sys/gateway/gateway';
  import viewmodeldataModel from './viewmodeldataModel.vue';
  import moment from 'moment';
  export default defineComponent({
    components: { AppstoreOutlined, MenuOutlined, viewmodeldataModel },
    props: {
      devicemodeid: {
        type: Number,
        default: null,
      },
      id: {
        type: Number,
        default: null,
      },
    },
    setup(props) {
      let sate: any = reactive({
        keyWord: '',
        mode: 'card',
        checked: false,
        loading: false,
        dataSource: [],
        timer: '',
      });
      //搜索
      const onSearch = () => {
        getList();
      };
      //查询列表
      function getList() {
        sate.loading = true;
        deviceModedata({
          device_mode_id: props.devicemodeid,
          device_id: props.id,
          q: sate.keyWord,
        }).then((res) => {
          let data = res;
          data.map((item) => {
            if (item.time != null) {
              item.time = moment(parseInt(item.time) * 1000).format('YYYY-MM-DD HH:mm:ss');
            }
          });
          sate.dataSource = data;
          sate.loading = false;
        });
      }
      //设置实时查询数据
      function settimer(e) {
        if (e == true) {
          sate.timer = setInterval(() => {
            getList();
          }, 5000);
        } else {
          clearInterval(sate.timer);
        }
      }
      const viewmodeldataRef: Ref<any | null> = ref(null);
      //点击查看
      const clickSee = (data) => {
        if (viewmodeldataRef.value) {
          viewmodeldataRef.value?.showTable(data, props.id);
        }
      };
      onMounted(() => {
        getList();
      });

      onBeforeUnmount(() => {
        console.log('销毁');
        clearInterval(sate.timer);
        sate.timer = null;
      });
      return {
        settimer,
        viewmodeldataRef,
        clickSee,
        onSearch,
        sate,
        columns: [
          {
            title: '属性id',
            dataIndex: 'attribute_id',
            align: 'center',
            key: 'attribute_id',
          },
          {
            title: '属性名称',
            align: 'center',
            dataIndex: 'attribute_name',
            key: 'age',
          },
          {
            title: '更新时间',
            align: 'center',
            dataIndex: 'time',
            key: 'time',
          },
          {
            title: '最新值',
            align: 'center',
            dataIndex: 'attribute_value',
            key: 'attribute_value',
          },

          {
            title: '标准值',
            align: 'center',
            dataIndex: 'standard_value',
            key: 'standard_value',
          },
          {
            title: '工艺状态',
            align: 'center',
            dataIndex: 'attr_status',
            key: 'attr_status',
            slots: { customRender: 'attr_status' },
          },
          {
            title: '最大值',
            align: 'center',
            dataIndex: 'max_value',
            key: 'max_value',
          },
          {
            title: '最小值',
            align: 'center',
            dataIndex: 'min_value',
            key: 'min_value',
          },
          {
            title: '上限值',
            align: 'center',
            dataIndex: 'ceiling_value',
            key: 'ceiling_value',
          },
          {
            title: '下限值',
            align: 'center',
            dataIndex: 'lower_value',
            key: 'lower_value',
          },

          {
            title: '操作',
            align: 'center',
            key: 'action',
            slots: { customRender: 'action' },
          },
        ],
      };
    },
  });
</script>
<style lang="less" scoped>
  .modeldataModel {
    padding: 10px 20px;
    box-sizing: border-box;
    height: calc(100vh - 220px);
    overflow-y: scroll;
    overflow-x: hidden;
    .cardItem {
      border: 1px solid #e9eef5;
      border-radius: 3px;
      padding: 6px 10px;
      box-sizing: border-box;
      margin-bottom: 20px;
      min-height: 145px;
      cursor: pointer;
      &.active {
        background: #fcefef;
        border: 1px solid #e26363;
        .count-left {
          color: #e26363 !important;
        }
      }
      .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 0px !important;
        .left {
          font-weight: 600;
          font-size: 16px;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 70%;
        }
        .right {
          font-size: 14px;
        }
      }
      .count {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .count-left {
          font-size: 28px;
          color: #000;
        }
      }
      .limit-values {
        font-size: 12px;
        .limit-values-row {
          line-height: 22px;
        }
        .mr16 {
          margin-right: 16px;
        }
        .mr8 {
          margin-right: 8px;
        }
      }
      .time {
        color: #2a3445;
        font-size: 12px;
      }
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .left {
        display: flex;
        align-items: center;
        .label {
          font-size: 14px;
        }
      }
      .search-ipt {
        margin: 0px 22px 0px 8px;
        width: 200px;
      }
      .right {
        .redioGroup {
          margin-left: 10px;
        }
      }
    }
  }
</style>
